<template>
	<view class="pages">
		<view class="topssechar">
			<view class="searchs">
				<image src="/static/coment/icon-search@2x.svg" mode="aspectFill" class="search_icon"></image>
				<input type="text" v-model="paramsData.searchKey" confirm-type="search" @confirm="searchConfirm"
					placeholder="输入合同名称/编号" class="full_flex" />
			</view>
		</view>
		<view class="tabBar">
			<view :class="['itemsTOp',item.id == paramsData.status?'selectClass':'']" v-for="(item,index) in tableList"
				:key="index" @click="handleClickTab(item.id)">
				{{item.text}}
				<view class="lins" v-if="item.id == paramsData.status"></view>
			</view>
		</view>
		<view style="width: 100%;height: 16rpx;"></view>
		<view style="margin-bottom: 16rpx;" v-for="(item,index) in data.dataList" :key="index">
			<view class="itemList">
				<view class="contens">
					<view style="width: 100%;height: 30rpx;"></view>
					<view :class="['title',item.status == 2?'setColor':'']">
						{{item.houseName}}
					</view>
					<view :class="['title_1',item.status == 2?'setColor1':'']">
						合同编号：{{item.contractNo}}
					</view>
					<view :class="['title_1','title_2',item.status == 2?'setColor1':'']" v-if="userType == 'admin'">
						签约人：{{item.nickName}}
					</view>
					<view :class="['title_1','title_2',item.status == 2?'setColor1':'']">
						发起时间：{{item.createdTime}}
					</view>
					<view class="title_1 title_2" v-if="item.status == 0">
						签约截止：{{item.endDate}}
					</view>
					<view :class="['title_1','title_2',item.status == 2?'setColor1':'']" v-if="item.status == 2">
						终止时间：{{item.endDate}}
					</view>
		
					<view class="title_1 title_2" v-if="item.status == 1 ">
						有效期至：{{item.endDate}} <text v-if="item.adventFlag==1&& data.userTypeValue==2" >(剩余<text style="color: red;">{{item.leftDays}}</text>天)</text>
					</view>

				</view>
				<view class="images">
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/1.png" mode="aspectFit" class="imgs" v-if="item.status==0"></image>
					<image src="/pagesA/static/hoom/2.png" mode="aspectFit" class="imgs" v-if="item.status==1"></image>
					<image src="/pagesA/static/hoom/3.png" mode="aspectFit" class="imgs" v-if="item.status==2"></image>
				</view>
				<view class="bottom_btn" v-if="item.status == 1 || item.status == 2 ">
					<view class="box">
						<!-- <view class="botn dis" v-if="item.status == 0 && userType !='admin'">
							待支付
						</view> -->
						<!-- botn_1 -->
						<view class="botn dis " v-if="item.status == 1 || item.status == 2 " @click="handleClickJump(item)">
							查看合同
						</view>
						<view class="botn dis" v-if="item.adventFlag ==1 && data.userTypeValue==2" @click="handleJumpRenewal(item)">
							发起续约
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main dis" style="z-index: 9999;height: 80vh;" v-if="data.dataList.length == 0">
			<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/noData.png" mode="aspectFit" style="width: 200rpx;height: 200rpx;"></image>
				<text>暂无数据</text>
			</view>
		</view>
		<view style="width: 100%;height: 200rpx;"></view>
		<!-- <view class="bottom_box" v-if="userType == 'admin'">
			<view class="add_btn" @click="handleClick">
				上传合同
			</view>
		</view> -->
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,ref
	} from 'vue';
	import {
		tableList
	} from './js/list.js'
	import {
		contracts
	} from './js/api.js'
	import {
		onReachBottom,onLoad,onShow
	} from '@dcloudio/uni-app'
	const app = getApp()
	const data = reactive({
		//1、待签约 2、已终止 3、生效中
		indexOf: 0,
		dataList: [],
		userTypeValue :app.globalData.userType
	})
	const paramsData = reactive({
		pageNum: 1,
		pageSize: 10,
		searchKey: "",
		status: -1
	})
	const isReach = ref(true)
	onReachBottom(() => {
		// console.log('上拉触底')
		if (!isReach.value) return
		paramsData.pageNum ++
		getListData()
	})
	const getListData = async () => {
		let params = JSON.parse(JSON.stringify(paramsData))
		if(params.status == -1) params.status =''
		
		let res = await contracts(params)
		// console.log('res====', res.data.data.list)
		if(res.data.code == 0){
			let list = res.data.data.list
			if(paramsData.pageNum == 1){
				data.dataList = list
			}else{
				data.dataList = data.dataList.concat(list)
			}
			if(list.length<10) isReach.value = false
		} 
		
	}
	const handleClickTab = (id)=>{
		
		paramsData.status = id
		getListData()
	}
	const handleClick = () => {
		uni.navigateTo({
			url: '/pagesA/uploadContract/uploadContract'
		})
	}
	//搜素
	const searchConfirm = () => {
		paramsData.pageNum = 1
		getListData()
	}
	const handleClickJump =(item)=>{
		console.log(item)
		// url:'/pagesA/uploadContract/uploadContract?score=subscribe&id=' + item.id+'&houseName='+item.name+'&houseId='+item.houseId
		uni.navigateTo({
			url:'/pagesA/uploadContract/uploadContract?type=preview&id=' + item.id
		})
	}
	const handleJumpRenewal = (item)=>{
		// formData.id = options.id
		// formData.houseId = options.houseId
		// formData.name = options.houseName
		uni.navigateTo({
			url:`/pagesA/renewal/renewal?id=${item.id}&houseName=${item.houseName}&houseId=${item.houseId}`
		})
	}
	onMounted(() => {
		
	})
	onShow(()=>{
		paramsData.pageNum = 1
		getListData()
	})
	const userType = ref('')
	onLoad((options)=>{
		console.log(options.type)
			
		if(options.type == 'admin'){
			userType.value = 'admin'
			uni.setNavigationBarTitle({
			   title: '全部合同'
			 });
		}
	})
</script>

<style lang="less">
	.pages {
		width: 100%;
		min-height: 100vh;
		background: #F6F6F6;

		.topssechar {
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			justify-content: center;

			.searchs {
				background: #FFFFFF;
				border: 1rpx solid rgba(204, 204, 204, 1);
				border-radius: 16rpx;
				width: 690rpx;
				height: 80rpx;
				display: flex;
				align-items: center;

				.search_icon {
					width: 48rpx;
					height: 48rpx;
					margin-left: 30rpx;
					margin-right: 10rpx;
				}
			}

		}

		.tabBar {
			width: 100%;
			height: 88rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.itemsTOp {
				width: 25%;
				height: 100%;
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				color: #4E4E4E;
				text-align: center;
				line-height: 28rpx;
				font-weight: 400;
				// border: 1px solid;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.lins {
					background: #EE7930;
					border-radius: 5rpx;
					width: 36rpx;
					height: 4rpx;
					position: absolute;
					bottom: 0;
				}
			}

			.selectClass {
				font-family: PingFangSC-Semibold;
				font-size: 32rpx;
				color: #333333;
				text-align: center;
				line-height: 28rpx;
				font-weight: 600;
			}
		}

		.itemList {
			width: 750rpx;
			// height: 216rpx;
			background-color: #fff;
			position: relative;


			.contens {
				width: 690rpx;
				height: 100%;
				margin: auto;
				padding-bottom: 16rpx;
				.title {
					font-family: PingFangSC-Semibold;
					font-size: 30rpx;
					color: #000000;
					line-height: 36rpx;
					font-weight: 600;
				}

				.title_1 {
					margin-top: 24rpx;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #666666;
					line-height: 26rpx;
					font-weight: 400;
				}

				.title_2 {
					margin-top: 16rpx;
				}

				.setColor {
					opacity: 0.5;
					font-family: PingFangSC-Semibold;
					font-size: 30rpx;
					color: #000000;
					line-height: 36rpx;
					font-weight: 600;
				}

				.setColor1 {
					opacity: 0.5;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #666666;
					line-height: 26rpx;
					font-weight: 400;
				}
			}

			.images {
				position: absolute;
				top: 30rpx;
				right: 30rpx;

				// border: 1px solid red;
				.imgs {
					width: 104rpx;
					height: 76rpx;
				}
			}
		}

		.bottom_btn {
			width: 750rpx;
			height: 86rpx;
			background-color: #fff;

			.box {
				width: 690rpx;
				height: 100%;
				border-top: 1rpx solid #eee;
				margin: auto;
				display: flex;
				align-items: center;
				flex-direction: row-reverse;

				.botn {
					width: 132rpx;
					height: 54rpx;
					background: #EE7930;
					border-radius: 8rpx;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #FFFDFC;
					text-align: center;
					line-height: 30rpx;
					font-weight: 400;
					margin-left: 16rpx;

				}

				.botn_1 {
					background-color: #fff;
					border: 2rpx solid rgba(238, 121, 48, 1);
					border-radius: 8rpx;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #EE7930;
					text-align: center;
					line-height: 30rpx;
					font-weight: 400;

				}

			}
		}
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0 60rpx 0;
		background: #FFFFFF;
		width: 100%;

		.add_btn {
			width: 626rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-image: linear-gradient(270deg, #F1B13F 0%, #F8D648 100%);
			border-radius: 50rpx;
			font-family: PingFangSC-Regular;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: 400;
		}
	}
</style>